<template>
  <div class="bottom-contain">
    <!-- <HelloWorld></HelloWorld> -->
    <!-- <Top></Top>
    <div class="bottom-div">
      <div class="left">
        <div class="left-top-equidistant">
          <Bar></Bar>
        </div>
        <div class="left-bottom-equidistant">
          <Pie></Pie>
        </div>
      </div>
      <div class="center">
       <HeNan></HeNan>
      </div>
      <div class="right">
        <div class="left-top-equidistant">
          <MultiterLine></MultiterLine>
        </div>
        <div class="left-bottom-equidistant">
          <List></List>
        </div>
      </div>
    </div> -->
    <el-button>ann</el-button>
  </div>
</template>

<script setup name="mains">

import { getCurrentInstance, proxyRefs, ref } from "vue"
import { useRouter } from "vue-router"

import Top from '@/components/top/busnote'
import Bar from '@/components/charts/bar'
import MultiterLine from '@/components/charts/multitermline'
import Pie from '@/components/charts/pie'
import List from '@/components/charts/list'
import HeNan from '@/components/charts/henan'
import HelloWorld from '@/components/HelloWorld.vue'
import myEventBus from '@/utils/notice'

const {proxy} = getCurrentInstance()
const router = useRouter()

const emitter = myEventBus

const dataScreenRef = ref(null);

// 根据浏览器大小推断缩放比例
// 首先要确定设计稿尺寸，默认是 1920 x 1080
// 分别计算浏览器和设计图宽高比
// 如果浏览器的宽高比大于设计稿的宽高比，就取浏览器高度和设计稿高度之比
// 如果浏览器的宽高比小于设计稿的宽高比，就取浏览器宽度和设计稿宽度之比
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width
  let wh = window.innerHeight / height
  return ww < wh ? ww : wh
}

// 监听浏览器 resize 事件
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
  }
  /**  其他代码 */
  emitter.emit('resize')
}

onMounted(() => {
  // 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
    dataScreenRef.value.style.width = `1920px`
    dataScreenRef.value.style.height = `1080px`
  }
  /**  其他代码 */
  // 为浏览器绑定事件
  window.addEventListener("resize", resize);
})







</script>

<style lang="scss" scoped>
.bottom-contain{
  background-image: url('@/assets/image/bg.png');
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  position: fixed;

  display: flex;
  flex-direction: column;
}

.bottom-div{
  flex: 1;
  display: flex;
  flex-direction: row;
  margin: 0 20px 20px 20px;
  .left{
   width: 25%;
   display: flex;
   flex-direction: column;

   .left-top-equidistant{
    flex: 1;
    margin-bottom: 5px;
   }
   .left-bottom-equidistant{
    flex: 1;
    margin-top: 5px;

   }

  }
  .center{
    flex: 1;
  }
  .right{
    width: 25%;
    display: flex;
    flex-direction: column;
    .left-top-equidistant{
      flex: 1;
      margin-bottom: 5px;
    }
   .left-bottom-equidistant{
      flex: 1;
      margin-top: 5px;
    }
  }





}
</style>
